//购物车的仓库类
class Cart{
  constructor() {
    this.list = []
  }
  log(msg) {
    console.log(msg);
  }
  add(data) {
    this.list.push(data)
    this.log(`add:${JSON.stringify(this.list,null,2)}`)
  }
  del(id) {
    this.list = this.list.filter(item=>!(id===item.id))
    this.log(`del:${JSON.stringify(this.list,null,2)}`)
  }
  getList() {
    return this.list.map(item=>item.name).join('\n')
  }  
}
//单例模式： 通过闭包对仓库类封装，实现不同的函数每次调用返回的都是同一个实例仓库
const getCart = (function () {
  let cart;
  return function () {
    if (!cart) {
     cart = new Cart()
    } 
    return cart
  }
})()


//模板模式：应用入口，通过init实现程序的初始化功能
class App {
  constructor(id) {
    this.$el=$(`#${id}`)
  }
  init() {
    this.initShoppingCart()
    this.initList()
  }
  initList() {
    (new List(this)).init()
  }
  initShoppingCart() {
    (new ShoppingCart(this)).init()
  }
}

class List {
  constructor(app) {
    this.$el = $('<div>')
    this.app = app
  }
 async init() { 
   let data = await this.loadData()
    this.initItemList(data)
    this.render()
  }
  loadData() {
  return  new Promise((resolve, reject) => {
      setTimeout(() => {
        let data = [
          {name:'传承书',price:'120',desc:'这是一本传参书',id:1,discount:true},
          {name:'传承书1',price:'1200',desc:'这是一本传参书+',id:2},
          {name:'传承书2',price:'1200',desc:'这是一本传参书++',id:3},
        ] 
        resolve(data)
      }, 0);      
    })
   }
  initItemList(data) { 
    data.forEach(item => {
      itemInfo(this,item).init()
    })
  }
  render() {
    this.app.$el.append(this.$el)
  }
  
}

//通过工厂模式统一实例化每一条信息并且对必要的信息进行处理
function itemInfo(that, item) {
  if (item.discount) {
    item = new  Proxy(item, {
      get: (target, key, receiver) => {
        console.log(`getting ${key}!`);
        if (key === 'name') {
          return `${target[key]} 【折扣】`
        }
        if (key === 'price') {
          return `${target[key]/0.7}`
        }
      },
    })
  }
 return new Item(that, item)
}
class Item {
  constructor(list, data) {
    
    this.$el = $('<div>')
    this.list = list
    this.data = data
    this.cart = getCart()
  }
  init() { 
    this.initContent()
    this.initButton()
    this.render()
  }
  initContent() { 
    let content = `<div>
    <p>名称:${this.data.name}</p>
    <p>价格:${this.data.price}</p>
    <p>描述:${this.data.desc}</p>
    </div>`
    this.$el.append(content)
      
  }
  initButton() {
    let that = this
    let $btn = $(`<button>加入购物车</button>`).click(function () {
      let $this = $(this)
      // console.log('$this.text()',$this.text())
      if ($this.text() === '加入购物车') {
        that.addToCartHandle(that.data)
        $this.text('取消添加')
        alert('加入购物车成功')
      } else {
        that.deleteFormCartHandle(that.data.id)
        $this.text('加入购物车')
        alert('取消添加成功')

       }
    })
    
    this.$el.append($btn)
   }
  addToCartHandle(data) { 
    this.cart.add(data)
  }
  deleteFormCartHandle(id) { 
    this.cart.del(id)
  }
  render() { 
    this.list.$el.append(this.$el)
  }
  
}

class ShoppingCart{
  constructor(app) {
    this.app = app
    this.$el = $('<div>')
    this.cart = getCart()
  }
  init() { 
    this.initBtn()
    this.render()
  }
  initBtn() {
   let $btn =  $('<button>购物车</button>').click(() => {
        this.showCart()
   })
    this.$el.append($btn)
  }
  showCart() { 
   let list =  this.cart.getList()
   alert(list)
  }
  render() {
    this.app.$el.append(this.$el)
  }
}



